<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Hope2</title>
    <link rel="stylesheet" href="https://lib.baomitu.com/bulma/0.9.1/css/bulma.css">
    <link rel="shortcut icon" href="/favicon.ico">
    <link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="http://www.datatables.net/rss.xml">
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.22/css/jquery.dataTables.min.css">
    <script type="text/javascript" language="javascript"
            src="https://lib.baomitu.com/jquery/3.5.1/jquery.min.js"></script>
    <script type="text/javascript" language="javascript"
            src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js"></script>
    <script type="text/javascript">
        var link = "https://qianyitian.com/spider/lego/sets/";
        // link = "http://127.0.0.1:8001/lego/sets/"
        var table;
        $(document).ready(function () {
            table = $('#stockTable').DataTable({
                // data: data,
                // order: [[3, "asc"]],
                columns: [
                    {
                        // https://www.lego.com/en-gb/product/{0}
                        data: 'code',
                        render: function (data, type, row, meta) {
                            return `<a href="https://www.lego.com/${row.countryCode}/product/${data}" target="_blank">${data}</a>`
                        }
                    },
                    {data: 'name'},
                    {data: 'badge'},
                    {data: 'stockStatus'},
                    {data: 'country'},
                    {data: 'updateDate'}
                ]
            });
        });


        function post() {
            var country = $("#country").val();
            var newLink = link + country;
            $.getJSON(newLink, function (data) {
                table.clear().rows.add(data).draw();
            });
        }
    </script>
</head>
<body class="layout-default">
<nav id="navbar" class="bd-navbar navbar has-shadow is-spaced">
    <div class="container">
        <div class="navbar-brand">
            <a class="navbar-item" href="https://qianyitian.com/">
                <img style="height:36px;width:36px;" src="https://img.qianyitian.com/icon/logo.png">  <h4
                    class="title is-3">Hope2</h4>
            </a>
        </div>
    </div>
</nav>

<section class="hero is-light is-info">
    <div class="hero-body">
        <div class="container">
            <h1 class="title">
                乐高套装官方库存状态
            </h1>
            <h2 class="subtitle" id="description">
                订阅各个地区乐高官网，汇总套装在各地的库存情况
            </h2>
            <h5 >Temporarily out of stock = 临时缺货</h5>
            <h5 >Available now = 货量充足</h5>
            <h5 >Back orders accepted = 延期订单</h5>
            <h5 >Retired product = 绝版</h5>
            <h5 >Sold out = 卖光</h5>

        </div>
    </div>
</section>
<section class="section">
    <div class="container">
        <div class="columns">
            <div class="column is-2">
                <div class="field">
                    <div class="control">
                        <div class="select is-success">
                            <select id="country">
                                <option value="en-gb">英国</option>
                                <option value="en-de">德国</option>
                                <option value="en-dk">丹麦</option>
                                <option value="en-au">澳大利亚</option>
                                <option value="en-us">美国</option>
                                <option value="all">所有国家</option>
                            </select>
                        </div>
                    </div>
                </div>

            </div>
            <div class="column is-1">
                <div class="field is-grouped">
                    <div class="control">
                        <button class="button is-link" onclick="post()">查询</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<section class="section">
    <div class="container">
        <table id="stockTable" class="display compact" style="width:100%">
            <thead>
            <tr>
                <th>编号</th>
                <th>名称</th>
                <th>标记</th>
                <th>库存</th>
                <th>国家</th>
                <th>更新时间</th>
            </tr>
            </thead>
        </table>
    </div>
</section>
<hr>
</body>
</html>